<template>
	<view class="recharge-main-box">

		<!-- 菜单栏开始 - 没雨溪网络 -->
		<view class="recharge-tab-box">
			<view class="recharge-tab-item" v-for="(item,index) in tab" :key="index" :class="tabId == index?'active':''"
				@click="handleChangeTab(index)">
				<view>{{item}}</view>
				<view class="line" v-if="tabId == index"></view>
			</view>
		</view>
		<!-- 菜单栏结束 - 没雨溪网络 -->

		<!-- 输入框开始 - 没雨溪网络 -->
		<view class="recharge-main-input">
			<input type="number" v-model="money" />
		</view>
		<!-- 输入框结束 - 没雨溪网络 -->

		<!-- 宫格开始 - 没雨溪网络 -->
		<view class="recharge-grid-box">
			<view class="recharge-grid-Item" v-for="(item,index) in List" :key="item.id"
				:class="moneyId == index?'active':''" @click="handleChangeMoney(index)">
				<view class="item-top-money" :class="moneyId == index?'active':''">
					￥{{item.money}}
				</view>
			</view>
		</view>
		<!-- 宫格结束 - 没雨溪网络 -->

		<!-- html文本区域开始 - 没雨溪网络 -->
		<view class="recharge-html-info">
			<view v-html="info"></view>
		</view>
		<!-- html文本区域结束 - 没雨溪网络 -->

		<view style="height: 140rpx;"></view>

		<!-- 充值按钮开始 - 没雨溪网络 -->
		<view class="recharge-main-bottom">
			<view class="recharge-bottom-button" @click="recharge">
				立即充值
			</view>
			<view class="recharge-bottom-text">如有疑问,请<span>提交问题反馈</span></view>
		</view>
		<!-- 充值按钮结束 - 没雨溪网络 -->

		<uni-popup ref="popup" type="bottom" :safe-area="true" :is-mask-click="true" backgroundColor="rgba(0,0,0,0)">
			<view class="popup-content">
				<view class="popup-title">请选择支付方式</view>
				<radio-group>
					<view class="item" @click="current = 1">
						<view class="item-left">
							<image class="item-left-icon" src="../../static/ysf.png"></image>
							<span>云闪付</span>
						</view>
						<radio value="1" :checked="1 === current" />
					</view>
					<!-- <view class="item" @click="current = 2">
						<view class="item-left">
							<image class="item-left-icon" src="../../static/zfb.png"></image>
							<span>支付宝</span>
						</view>
						<radio value="2" :checked="2 === current" />
					</view> -->
					<view class="item" @click="current = 3">
						<view class="item-left">
							<image class="item-left-icon" src="../../static/wx.jpg"></image>
							<span>微信</span>
						</view>
						<radio value="3" :checked="3 === current" />
					</view>
				</radio-group>

				<view class="botton" @click="weakeupPay">确 定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 1,
				tab: ['在线充值(推荐)', '官方充值'],
				tabId: 0,
				money: 50,
				moneyId: 0,
				List: [{
						id: 1,
						money: 50,
						title: '赠送VIP时数'
					},
					{
						id: 2,
						money: 100,
						title: '微信转卡稳定快速'
					},
					{
						id: 3,
						money: 200,
						title: '微信转卡稳定快速'
					},
					{
						id: 4,
						money: 300,
						title: '微信转卡稳定快速'
					},
					{
						id: 5,
						money: 500,
						title: '请勿修改订单金额'
					},
					{
						id: 6,
						money: 1000,
						title: '网银返利1%'
					},
					{
						id: 7,
						money: 2000,
						title: '网银返利1%'
					},
					{
						id: 8,
						money: 3000,
						title: '网银返利1%'
					},
					{
						id: 9,
						money: 5000,
						title: '网银返利1%'
					},
					{
						id: 10,
						money: 10000,
						title: '网银返利1%'
					},
					{
						id: 11,
						money: 20000,
						title: '网银返利1%'
					},
					{
						id: 12,
						money: 30000,
						title: '网银返利1%'
					}
				],
				info: '<p><span style="color:#E53333;"><strong><span style="font-size:14px;">使用新卡充值，额外充值返利1%</span></strong></span></p><p><span style="color:#E53333;"><strong><span style="font-size:14px;"><br /></span></strong></span></p><p><span style="color:#666666;background-color:#FFE500;"><span style="font-size:14px;background-color:#FFE500;color:#666666;">如遇在线充值繁忙，请您切换其他通道</span></span></p><p><span style="color:#999999;background-color:#FFE500;"><span style="font-size:14px;background-color:#FFE500;color:#999999;"><strong><span style="color:#E53333;"><br /></span></strong></span></span></p><p><span style="color:#999999;"><span style="font-size:14px;color:#999999;"><strong><span style="color:#E53333;">温馨提醒：</span></strong></span></span> </p><p><span style="color:#9933E5;font-size:12px;"><span style="font-size:12px;color:#9933E5;"><span style="color:#9933E5;font-size:12px;"><strong>1.禁止修改订单金额支付，否则可能导致不到账</strong></span></span></span> </p><p><span style="color:#9933E5;font-size:12px;"><span style="font-size:12px;color:#9933E5;"><span style="color:#9933E5;font-size:12px;"><strong>2.请勿私下转账，否则无法查询订单</strong></span></span></span> </p><p><span style="color:#009900;"><strong>3.请在</strong><span style="color:#E53333;"><strong><u>90秒内</u></strong></span><strong>完成充值，否则可能导致不到账</strong></span></p>'
			};
		},
		methods: {
			goPage() {
				uni.navigateTo({
					url: '/pages/recahrge-log/recahrge-log'
				})
			},
			weakeupPay() {
				uni.showToast({
					icon: 'loading',
					title: '正在唤醒微信支付',
					duration: 2000,
				})
				uni.getProvider({
					service: 'payment',
					success: res => {
						// console.log(res)
						if (res.provider.find(item => item.id == 'wxpay')) {
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: 'orderInfo', //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						}
					}
				})
			},
			handleChangeTab(index) {
				this.tabId = index
			},
			handleChangeMoney(index) {
				this.moneyId = index
				this.money = this.List[index].money
			},
			close() {
				this.$refs.popup.close()
			},
			recharge() {
				this.$refs.popup.open();
				uni.showToast({
					icon: 'none',
					title: '充值类型:' + this.tab[this.tabId] + '充值金额:' + this.List[this.moneyId].money
				})
			}
		}
	}
</script>

<style lang="scss">
	uni-popup {
		width: 100%;
		position: fixed;
		z-index: 99999;
		// bottom:170px;
	}

	.popup-content {
		background: #fff;
		min-height: 200rpx;
		padding: 20rpx;
		border-radius: 30rpx 30rpx 0 0;

		.popup-title {
			font-size: 28rpx;
			color: #666;
			margin: 30rpx 0;
		}

		.botton {
			width: 100%;
			height: 80rpx;
			background: rgb(252, 87, 91);
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			margin-top: 90rpx;
			margin-bottom: 20rpx;
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			box-shadow: #d4d0d0 0px 0px 6px 0px;


			.item-left {
				display: flex;
				align-items: center;

				.item-left-icon {
					width: 50rpx;
					height: 50rpx;
				}

				span {
					margin-left: 20rpx;
				}
			}
		}
	}

	.header-right-text {
		font-size: 26rpx;
	}

	.recharge-main-box {
		.recharge-tab-box {
			display: flex;
			align-items: flex-start;
			justify-content: space-evenly;
			padding: 30rpx 0;
			position: relative;

			.recharge-tab-item {
				font-size: 28rpx;
				color: #888;
				display: flex;
				align-items: center;
				flex-direction: column;

				&.active {
					color: rgb(252, 87, 91);
					font-size: 30rpx;
					font-weight: bold;
				}

				.line {
					height: 6rpx;
					border-radius: 20rpx;
					background: rgb(252, 87, 91);
					width: 60rpx;
					margin-top: 16rpx;
				}
			}
		}

		.recharge-main-input {
			input {
				background: #f4f4f4;
				margin: 0 20rpx;
				padding: 30rpx;
				border-radius: 10rpx;
			}
		}

		.recharge-grid-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-content: space-between;
			margin: 5rpx;

			.recharge-grid-Item {
				width: 31%;
				text-align: center;
				box-sizing: border-box;
				background: #f3f3f3;
				margin: 9rpx 0;
				border-radius: 10rpx;
				border: 2rpx solid #f3f3f3;
				position: relative;
				overflow: hidden;

				&.active {
					border: 2rpx solid rgb(252, 87, 91);
				}

				.item-top-money {
					padding: 30rpx 0;
					font-weight: bold;
					color: rgb(125, 125, 125);

					&.active {
						color: rgb(210, 172, 138);
					}
				}

				.item-top-money::first-letter {
					font-size: 26rpx;
					font-weight: normal;
					color: rgb(210, 172, 138);
				}

				.item-botton-text {
					width: 100%;
					font-size: 24rpx;
					padding: 10rpx 0;
					color: rgb(139, 139, 139);
					border-radius: 0 0 10rpx 10rpx;

					&.active {
						background: rgb(252, 87, 91);
						color: #fff;
					}
				}

				.item-right-top {
					position: absolute;
					top: 0;
					right: 0;
					width: 0;
					height: 0;
					border-top: 50rpx solid rgb(252, 87, 91);
					border-left: 50rpx solid transparent;
				}

				.item-right-text {
					position: absolute;
					top: 0;
					right: 4rpx;
					color: #fff;
					z-index: 999;
					font-size: 22rpx;

					.icon {
						width: 22rpx;
						height: 22rpx;
					}
				}
			}
		}

		.recharge-html-info {
			margin: 20rpx;
		}

		.recharge-main-bottom {
			position: fixed;
			z-index: 1;
			bottom: 0;
			width: 100%;
			height: 140rpx;
			background: #fff;
			display: flex;
			align-items: center;
			flex-direction: column;
			padding-top: 20rpx;

			.recharge-bottom-button {
				background: rgb(235, 98, 92);
				width: 92%;
				height: 80rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
			}

			.recharge-bottom-text {
				font-size: 24rpx;
				margin-top: 10rpx;
				color: #666666;

				span {
					color: rgb(235, 98, 92);
				}
			}
		}
	}
</style>